.ssosdk-container .page-main {
    position: relative;
    display: inline-block;
    width: 420px;
}

.ssosdk-container .content-main {
    padding: 44px 56px 10px;
    min-height: 379px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.01);
    border: solid 1px rgba(232, 232, 232, 0.56);
    background-color: #ffffff;
}

.ssosdk-container .content-main-modal {
    border-radius: 4px;
}

@media screen and (max-width: 500px) {
    html #example, body #example {
        width: 100%;
        margin-top: 20%;
    }
    html .ssosdk-container .page-main, body .ssosdk-container .page-main {
        width: 100%;
    }
    html .ssosdk-container .form-main, body .ssosdk-container .form-main {
        width: auto;
    }
    html .ssosdk-container .href-group, body .ssosdk-container .href-group {
        width: 100%;
    }
    html .ssosdk-container .thrid-area .area-item:not(:first-child), body .ssosdk-container .thrid-area .area-item:not(:first-child) {
        display: none;
    }
    html .ssosdk-container .thrid-area .area-item span:hover, body .ssosdk-container .thrid-area .area-item span:hover {
        color: #666;
    }
}

@media screen and (max-width: 350px) {
    .ssosdk-container .form-input-main {
        width: 60%;
    }
}

.sso-xigua.ssosdk-container {
    background-color: #fff;
}

.sso-xigua.ssosdk-container .form-title {
    padding-bottom: 0;
    font-size: 16px;
    line-height: 22px;
}

.sso-xigua.ssosdk-container .form-main .form-input {
    margin-top: 16px;
    height: 48px;
    line-height: 30px;
    background-color: #f7f7f7;
}

.sso-xigua.ssosdk-container .form-main .form-input:first-child {
    margin-top: 16px;
}

.sso-xigua.ssosdk-container .form-main .form-input input {
    height: 30px;
    padding: 4px 0;
    background-color: #f7f7f7;
}

.sso-xigua.ssosdk-container .form-main .form-input input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #f7f7f7 inset !important;
}

.sso-xigua.ssosdk-container .form-main .form-input input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px #f7f7f7 inset !important;
}

.sso-xigua.ssosdk-container .form-main .error-tips {
    font-size: 12px;
    line-height: 17px;
    height: 44px;
    padding-top: 12px;
    padding-bottom: 15px;
}

.sso-xigua.ssosdk-container .form-main .has-remember {
    margin-bottom: 28px;
}

.sso-xigua.ssosdk-container .confirm {
    text-align: center;
    padding-bottom: 20px;
    font-size: 12px;
    line-height: 18px;
}

.sso-xigua.ssosdk-container .confirm a {
    color: #538fdb;
}

.sso-xigua.ssosdk-container .area-item {
    margin-right: 12px;
}

.sso-xigua.ssosdk-container .area-item img {
    margin-right: 0;
}

.sso-xigua.ssosdk-container .thrid-area {
    font-size: 14px;
    padding-top: 17px;
}

.sso-xigua.ssosdk-container .thrid-area::before {
    content: '其他方式：';
    color: #666;
    margin-right: 4px;
}

.sso-xigua.ssosdk-container .thrid-area #sso_pwd_login, .sso-xigua.ssosdk-container .thrid-area #sso_code_login {
    position: absolute;
    right: 0;
    font-size: 14px;
}

.sso-xigua.ssosdk-container .thrid-area #sso_pwd_login img, .sso-xigua.ssosdk-container .thrid-area #sso_code_login img {
    display: none;
}

.sso-xigua.ssosdk-container #sso_code, .sso-xigua.ssosdk-container #sso_forget_pwd {
    color: #ff142b;
    line-height: 28px;
}

.sso-xigua.ssosdk-container .btn-active {
    height: 48px;
    line-height: 48px;
    background-image: linear-gradient(to left, #ff358d, red);
}

.sso-xigua.ssosdk-container .form-button {
    margin-bottom: 3px;
}

.sso-xigua.ssosdk-container .content-main {
    padding-top: 40px;
    min-height: 354px;
}

.sso-xigua.reset_pwd {
    width: 420px;
}

.sso-xigua.reset_pwd .content-main {
    padding-bottom: 43px;
}

.ssosdk-container .form-title {
    line-height: 28px;
    vertical-align: top;
    font-size: 20px;
    color: #222;
    display: inline-block;
    margin-right: 30px;
    padding-bottom: 8px;
    font-weight: 500;
    font-family: 'PingFangSC';
}

.ssosdk-container .form-title-active {
    cursor: pointer;
}

.ssosdk-container .form-title-normal {
    color: #666;
    font-weight: 400;
    cursor: pointer;
}

.ssosdk-container .form-title-width {
    width: 100%;
    position: relative;
}

.ssosdk-container .form-title-width .return-to-login {
    color: #666;
    font-size: 14px;
    line-height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.ssosdk-container .form-button {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 34px;
}

.ssosdk-container .btn-disable {
    border: solid 1px #e8e8e8;
    background-color: #f9f9f9;
    color: #bfbfbf;
    cursor: not-allowed;
}

.ssosdk-container .btn-active {
    background-color: #f85959;
    color: #fff;
    cursor: pointer;
    border: none;
}

.ssosdk-container .btn-active:hover {
    background-color: #ff8585;
    color: #fff;
    cursor: default;
}

.ssosdk-container .district {
    float: left;
    font-size: 16px;
    line-height: 24px;
    height: 80%;
    position: relative;
}

.ssosdk-container .district .district-input-box {
    height: 100%;
    margin-right: 10px;
    position: relative;
}

.ssosdk-container .district .district-input-box span {
    margin-right: 10px;
}

.ssosdk-container .district .district-input-box .arrow-down {
    transform: rotate(0);
    transition: transform 0.5s;
}

.ssosdk-container .district .district-input-box .arrow-up {
    transition: transform 0.5s;
    transform: rotate(180deg);
}

.ssosdk-container .district .district-code-input {
    width: 42px;
    border: none;
    border-right: 1px solid #999;
    font-size: 14px;
    color: #222;
    text-align: left;
}

.ssosdk-container .district .select-show {
    display: block;
}

.ssosdk-container .district .select-hide {
    display: none;
}

.ssosdk-container .district .select-ul {
    position: absolute;
    z-index: 100;
    left: -12px;
    top: 35px;
    width: 220px;
    max-height: 188px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    border: solid 1px #e8e8e8;
    background-color: #ffffff;
    overflow-y: auto;
}

.ssosdk-container .district .select-ul .select-li {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px;
}

.ssosdk-container .district .select-ul .select-li:hover {
    cursor: pointer;
    background-color: #f5f5f5;
}

.ssosdk-container .district .select-ul .select-li span:last-child {
    color: #999;
    float: right;
}

.ssosdk-container .district .select-ul .select-active {
    color: #f85959;
}

.ssosdk-container .district .select-ul .select-active span:last-child {
    color: #999;
}

.ssosdk-container h1, .ssosdk-container h2, .ssosdk-container h3, .ssosdk-container h4, .ssosdk-container h5, .ssosdk-container h6, .ssosdk-container hr, .ssosdk-container p, .ssosdk-container div, .ssosdk-container blockquote, .ssosdk-container dl, .ssosdk-container dt, .ssosdk-container dd, .ssosdk-container ul, .ssosdk-container ol, .ssosdk-container li, .ssosdk-container pre, .ssosdk-container form, .ssosdk-container fieldset, .ssosdk-container legend, .ssosdk-container button, .ssosdk-container input, .ssosdk-container textarea, .ssosdk-container th, .ssosdk-container td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ssosdk-container h1, .ssosdk-container h2, .ssosdk-container h3, .ssosdk-container h4, .ssosdk-container h5, .ssosdk-container h6 {
    font-size: 100%;
}

.ssosdk-container address, .ssosdk-container cite, .ssosdk-container dfn, .ssosdk-container em, .ssosdk-container var {
    font-style: normal;
}

.ssosdk-container code, .ssosdk-container kbd, .ssosdk-container pre, .ssosdk-container samp {
    font-family: couriernew, courier, monospace;
}

.ssosdk-container small {
    font-size: 12px;
}

.ssosdk-container ul, .ssosdk-container ol {
    list-style: none;
}

.ssosdk-container a {
    text-decoration: none;
}

.ssosdk-container a:hover {
    text-decoration: underline;
}

.ssosdk-container sup {
    vertical-align: text-top;
}

.ssosdk-container sub {
    vertical-align: text-bottom;
}

.ssosdk-container legend {
    color: #000;
}

.ssosdk-container fieldset, .ssosdk-container img {
    border: 0;
}

.ssosdk-container button, .ssosdk-container input, .ssosdk-container select, .ssosdk-container textarea {
    font-size: 100%;
}

.ssosdk-container table {
    border-collapse: collapse;
    border-spacing: 0;
}

.ssosdk-container input {
    outline: none;
    box-shadow: none;
}

.ssosdk-container button {
    outline: none;
}

.ssosdk-container input::placeholder {
    color: #999;
}

.ssosdk-container .form-main .form-input {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 22px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    border: solid 1px #d9d9d9;
}

.ssosdk-container .form-main .form-input .input-container {
    display: flex;
}

.ssosdk-container .form-main .form-input .input-container input {
    width: 100%;
}

.ssosdk-container .form-main .form-input:hover {
    border-radius: 4px;
    border: solid 1px #999;
}

.ssosdk-container .form-main .form-input:focus {
    color: #bfbfbf;
}

.ssosdk-container .form-main .form-input .form-input-pwd {
    width: 100%;
    padding-right: 66px;
}

.ssosdk-container .form-main .form-input .input-custom {
    width: 100%;
}

.ssosdk-container .form-main .form-input:first-child {
    margin-top: 26px;
}

.ssosdk-container .form-main .form-input:last-child {
    margin-bottom: 16px;
}

.ssosdk-container .form-main .form-input input {
    border: none;
    height: 22px;
    line-height: 22px;
    background: none;
}

.ssosdk-container .form-main .form-input input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset !important;
}

.ssosdk-container .form-main .form-input input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px #fff inset !important;
}

.ssosdk-container .form-main .form-input .disc {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    -ms-text-security: disc;
    -o-text-security: disc;
    text-security: disc;
}

.ssosdk-container .form-main .form-input-last {
    margin-bottom: 0;
}

.ssosdk-container .form-main .form-code-text {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 14px;
    color: #222;
    text-align: right;
    line-height: 20px;
    height: 20px;
    cursor: pointer;
}

.ssosdk-container .form-main .form-code-text:hover {
    color: #666;
}

.ssosdk-container .form-main .show-time {
    color: #999;
    cursor: auto;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
}

.ssosdk-container .confirm {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 8px;
}

.ssosdk-container .confirm-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: solid 1px #d9d9d9;
    display: inline-block;
    margin-right: 8px;
    vertical-align: text-bottom;
    cursor: pointer;
}

.ssosdk-container .confirm-checkbox-checked {
    border: none;
}

.ssosdk-container .color-grey {
    color: #999;
}

.ssosdk-container .color-click {
    color: #222;
    margin: 0 6px;
}

.ssosdk-container .color-click:visited {
    color: #222;
}

.ssosdk-container .error-tips {
    white-space: nowrap;
    font-size: 12px;
    width: 100%;
    height: 24px;
    line-height: 24px;
    color: #ff5e5e;
}

.ssosdk-container .error-tips .icon-triangle {
    position: relative;
}

.ssosdk-container .error-tips .icon-triangle .icon-triangle-after {
    border: solid 1px #d9d9d9;
    top: 3px;
    border-top: none;
    border-left: none;
    background: #fff;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.08);
    width: 9px;
    height: 9px;
    position: absolute;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
}

.ssosdk-container .show-tips {
    display: block;
}

.ssosdk-container .hide-tips {
    display: none;
}

.ssosdk-container .qr-img {
    width: 162px;
    height: 162px;
    border-radius: 2px;
    border: solid 1px #e8e8e8;
    margin: 0 auto;
    position: relative;
}

.ssosdk-container .qr-img img {
    width: 100%;
}

.ssosdk-container .qr-img .expire-time {
    color: #666;
    font-size: 14px;
    line-height: 20px;
    margin-top: 46px;
    margin-bottom: 10px;
}

.ssosdk-container .qr-img .refresh-btn {
    background-color: #fff;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    width: 96px;
    margin: 0 auto;
    font-size: 14px;
}

.ssosdk-container .qr-img .refresh-btn .img-icon {
    width: 16px;
    height: 16px;
    vertical-align: sub;
    margin-right: 4px;
    display: inline-block;
}

.ssosdk-container .qr-img .qr-code-timeout {
    background-color: #f7f7f7;
    opacity: 0.94;
    box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.ssosdk-container .qr-img .qr-success {
    background: url() center center no-repeat;
    width: 90px;
    height: 90px;
    margin-top: 26px;
    margin-left: 31px;
    background-size: 90px;
}

.sso-qr .qr-img {
    margin-bottom: 16px;
}

.sso-qr .qr-img-msg {
    margin-bottom: 0;
}

.ssosdk-container .toast {
    position: absolute;
    padding: 14px 16px;
    height: 48px;
    line-height: 20px;
    font-size: 14px;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    margin-top: -50px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}

.ssosdk-container .toast .toast-text {
    color: #222;
}

.ssosdk-container .toast .toast-text:before {
    content: '';
    width: 16px;
    height: 16px;
    margin-top: 2px;
    float: left;
    margin-right: 12px;
    background: url() center center no-repeat;
    background-size: 100%;
}

.ssosdk-container .remember {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 8px;
    margin-top: -28px;
}

.ssosdk-container .remember-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: solid 1px #d9d9d9;
    display: inline-block;
    margin-right: 8px;
    vertical-align: text-bottom;
    cursor: pointer;
}

.ssosdk-container .remember-checkbox-checked {
    border: none;
}

.ssosdk-container .color-grey {
    color: #999;
}

.ssosdk-container .color-click {
    color: #222;
    margin: 0 6px;
}

.ssosdk-container .color-click:visited {
    color: #222;
}

.ssosdk-container .form-main {
    margin: 0 auto;
}

.ssosdk-container .form-main .form-placeholder {
    height: 20px;
    margin-bottom: 8px;
}

.ssosdk-container .login-type {
    position: absolute;
    cursor: pointer;
    right: 5px;
    top: 5px;
    width: 60px;
    height: 60px;
}

.ssosdk-container .login-type img {
    width: 100%;
}

.ssosdk-container .thrid-area {
    display: flex;
    padding: 10px 0;
    position: relative;
}

.ssosdk-container .thrid-area .area-item {
    margin-right: 17px;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
}

.ssosdk-container .thrid-area .area-item img {
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -3px;
    width: 20px;
    height: 20px;
}

.ssosdk-container .thrid-area .area-item span:hover {
    color: #666;
}

.ssosdk-container .href-group {
    padding: 0 56px;
    width: 420px;
    color: #666;
    text-align: right;
    height: 52px;
    line-height: 52px;
    background-color: #fff8f8;
}

.ssosdk-container .href-group-inline {
    width: 100%;
    padding: 10px 0;
    display: flex;
    margin-top: -26px;
}

.ssosdk-container .href-group-inline .href-item:last-child {
    padding-right: 0;
}

.ssosdk-container .href-group-inline .href-item:first-child {
    padding-left: 0;
}

.ssosdk-container .href-item {
    display: inline-block;
    padding: 0 24px;
    color: #666;
    font-size: 12px;
    line-height: 8px;
    cursor: pointer;
    border-right: 1px solid #d8d8d8;
}

.ssosdk-container .href-item ::before {
    border-right: 1px solid #d8d8d8;
}

.ssosdk-container .href-item:last-child {
    border-right: none;
    padding-right: 0;
}

.ssosdk-container .toast-show {
    display: block;
}

.ssosdk-container .toast-hide {
    display: none;
}

.ssosdk-container .href-toast {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    text-align: left;
    padding: 44px 56px 0;
    border-radius: 3px;
    min-height: 368px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.01);
    border: solid 1px rgba(232, 232, 232, 0.56);
    background-color: #ffffff;
}

.ssosdk-container .href-toast .href-toast-cancle {
    position: absolute;
    right: 20px;
    top: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.ssosdk-container .href-toast .href-toast-title {
    display: block;
    padding-bottom: 0;
    margin-bottom: 12px;
}

.ssosdk-container .href-toast .href-toast-content {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

.ssosdk-container .href-toast .href-toast-qrcode {
    margin: 16px auto 58px;
    text-align: center;
    height: 162px;
    width: 162px;
    padding: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
}

.ssosdk-container .href-toast .href-toast-footer {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

.ssosdk-container .href-toast .href-toast-footer-highlight {
    color: #222;
}

.ssosdk-container .sso-qr {
    display: inline-block;
    width: 175px;
    padding-left: 28px;
    position: relative;
    top: -23px;
}

.ssosdk-container .sso-qr::before {
    content: '';
    border-left: solid 0.5px #eaeaea;
    width: 0;
    height: 248px;
    left: 0;
    position: absolute;
}

.ssosdk-container .sso-qr .qr-img {
    width: 150px;
    height: 150px;
    margin-bottom: 0;
}

.ssosdk-container .sso-qr .qr-title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 19px;
}

.ssosdk-container .sso-qr .qr-desc {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

.ssosdk-container .sso-qr .qr-desc span {
    color: #f00;
    cursor: pointer;
}

.ssosdk-container .sso-qr .qr-desc img {
    margin-left: 4px;
    width: 16px;
    vertical-align: text-top;
    margin-top: 2px;
}

.ssosdk-container .sso-qr .qr-desc-top {
    margin-top: 16px;
}

.ssosdk-container .sso-phone {
    position: absolute;
    z-index: 10;
    padding-right: 28px;
    background-color: #fff;
}

.ssosdk-container .sso-phone img {
    width: 168px;
    margin-left: -8px;
    margin-top: -40px;
}